<template>
	<view>
		<view class="top">
			<uni-nav-bar @clickLeft="$pageBack()" :border="false" :statusBar="true" :fixed="true" background-color="#" left-icon="back" title="会员中心"></uni-nav-bar>
			<image class="bcg" src="/static/ibcg.png" mode=""></image>
			<view class="ads">
				<view class="user flex">
					<image :src="userData.img" mode="aspectFill"></image>
					{{ userData.name }}
				</view>
				<!-- vip0游客 1体验会员 2会员 -->
				<!-- vipType 0游客 1稻友 2稻使 3社长-->
				<view class="img" v-if="userData.vip == 0">
					<image class="img2" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy1.png" mode=""></image>
					<view class="img2ads">即刻加入「稻浪同歌」吧~</view>
				</view>
				<view class="img" v-else>
					<image class="img1" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy2.png" mode=""></image>
					<view class="img1ads">
						<view class="tit">已加入「稻浪同歌」 {{ getDaysDifference(userData.vipTimeBegin) }} 天</view>
						<view class="cont_text">
							<view class="t1">{{ userData.vip == 2 ? '年费会员' : '体验会员' }}</view>
							<view class="t2" v-if="userData.vip == 1">30天内有三次活动体验机会，于{{ userData.vipTimeEnd }}到期</view>
							<view class="t2" v-if="userData.vip == 2">将于{{ userData.vipTimeEnd }}到期</view>
						</view>
					</view>
				</view>
				<view class="dy">
					<view class="tit">稻友特惠</view>
					<view class="dy_block">
						<view class="dy_img">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy3.png" mode=""></image>
							<view class="dy_text">
								<view class="t1">
									年卡 ￥
									<text>{{ dataConfig.vipAmount }}</text>
								</view>
								<view class="t2">一张年卡，解锁全年专属权益与精彩</view>
							</view>
						</view>
						<view class="btn" @click="open">{{ userData.vip == 2 ? '立即续费' : '立即开通' }}</view>
					</view>
				</view>
				<!-- v-if="userData.vipType == 3 || userData.vipType == 4" -->
				<view class="dy" v-if="false">
					<view class="tit">会员领取</view>
					<view class="dy_block">
						<view class="dy_img">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy4.png" mode=""></image>
							<view class="dy_text">
								<view class="t1">稻浪会员</view>
								<view class="t2">耕耘怀恩，不负辛勤，会籍敬奉，聊表谢忱</view>
							</view>
						</view>
						<view class="btn" @click="handleLINGQU">立即领取</view>
					</view>
				</view>
				<view class="hy_ts">
					<image v-if="userData.vip != 1" class="titimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy5.png" mode=""></image>
					<image v-if="userData.vip == 1" class="titimg1" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy12.png" mode=""></image>
					<view class="tit" v-if="userData.vip != 1">— 尊享以下6大特权 —</view>
					<view class="texts">
						<view class="" v-if="userData.vip != 1">
							<view class="title flex">
								<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
								全域活动畅通行
							</view>
							<view class="ts">会员可无限次参与全国范围内的线上及线下活动，畅享多元主题与专属福利</view>
						</view>
						<view class="" v-if="userData.vip == 1">
							<view class="title flex">
								<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
								3次体验随心选
							</view>
							<view class="ts">30天内有3次免费体验机会，随心体验本地线下、全国线上多元主题活动</view>
						</view>
						<view class="ddd"></view>
						<view class="title flex">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
							发起活动你做主
						</view>
						<view class="ts">读书、看展、观影…你说了算！自定主题、时间、地点（可以选择官方推荐场地）</view>
						<view class="ddd"></view>
						<view class="title flex">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
							一键直达同好圈
						</view>
						<view class="ts">直达同城高质量多元兴趣社群，还可以自行创建，轻松找到同“好”中人</view>
						<view class="ddd"></view>
						<view class="title flex">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
							你的声音被听见
						</view>
						<view class="ts">投票或提议活动内容、推荐书籍展览等资源，我们倾听来落地</view>
						<view class="ddd"></view>
						<view class="title flex">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
							新会员无忧体验
						</view>
						<view class="ts">注册30天内参与≤3场活动，不满意全额退款（已使用体验会员不享受此权益）</view>
						<view class="ddd"></view>
						<view class="title flex">
							<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy6.png" mode=""></image>
							解锁全能工具箱
						</view>
						<view class="ts">在社区发布动态、用稻穗值兑换文创、向平台建言献策…更多宝藏功能，等你来解锁。</view>
					</view>
				</view>
				<view class="runbtn" v-if="refundCan" @click="applyRefund">申请退款</view>
				<view class="hy_btns_zw"></view>
			</view>
		</view>
		<view class="hy_btns">
			<view class="cont">
				<view class="select flex" >
					<image v-if="isRead" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view :style="{ color: isRead ? '#75613e' : '#979797' }" class="">
						请先阅读
						<text @click.stop="$pageGo('/pages/user/agreement?id=2')">《会员服务协议》</text>
					</view>
				</view>
				<view class="onebtns" @click="open">￥{{ dataConfig.vipAmount }}/年 {{ userData.vip == 2 ? '立即续费' : '立即开通' }}</view>
			</view>
		</view>

		<uni-popup ref="popupRef" type="center">
			<view class="popup">
				<view class="imgbcg_v">
					<image class="imgbcg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy7.png" mode=""></image>
					<view class="imgbcg_ads">
						<view class="tss">
							欢迎成为第 「
							<text>{{ userData.vipRank }}</text>
							」位稻友，
						</view>
						<view class="tss">这片精神原野等你耕耘。</view>
						<view class="tss">思想碰撞的喜悦即将开启，</view>
						<view class="tss">期待与您并肩同行，</view>
						<view class="tss">在书页与生活的交响中，</view>
						<view class="tss">同歌共舞。</view>
					</view>
				</view>
				<view class="popup_btns" @click="$pageSwitchTab('/pages/index/index')">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getConfig } from '@/api/login.js';
import { getUser, getData, createVip, receiveVip, vipFirst, vipRefund } from '@/api/user.js';
import { toast, showConfirm, showLoad, hideLoad } from '@/utils/common.js';
const userData = reactive({});
const isRead = ref(false);
const getUserInfo = () => {
	getUser().then((res) => {
		if (res.code == 200) {
			res.data.user.img = res.data.user.img === '' ? 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png' : res.data.user.img;
			Object.assign(userData, res.data.user);
			if (res.data.user.vip != 0) {
				vipFirst({}).then((res) => {
					if (res.code == 200) {
						refundCan.value = res.data.refundCan;
						firstID.value = res.data.id;
					}
				});
			}
		}
	});
};
const popupRef = ref(null);
const vipRank = ref(0);
const open = () => {
	if (!isRead.value) {
		toast('请先阅读并同意会员协议');
		return;
	}
	// 开通会员
	showLoad('支付加载中....');
	createVip({}).then((res) => {
		if (res.code == 200) {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.packageVal,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success: (res) => {
					hideLoad();
					// 开通会员
					if (userData.vip != 2) {
						getUser().then((res) => {
							if (res.code == 200) {
								res.data.user.img = res.data.user.img === '' ? 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png' : res.data.user.img;
								Object.assign(userData, res.data.user);
								popupRef.value.open();
							}
						});
					} else {
						uni.reLaunch({
							url: '/mypage/member/goindex'
						});
					}
				},
				fail: (err) => {
					console.log('支付失败:', err);
					hideLoad();
					// 支付失败处理
					if (err.errMsg === 'requestPayment:fail cancel') {
						toast('您取消了支付');
					} else {
						toast('支付失败，请重试');
					}
				}
			});
		}
	});
};
const close = () => {
	popupRef.value.close();
};
//分社长免费领取会员
const handleLINGQU = () => {
	receiveVip({}).then((res) => {
		if (res.code == 200) {
			toast('已领取会员');
			getUserInfo();
		}
	});
};
const getDaysDifference = (startTime) => {
	const start = new Date(startTime);
	const now = new Date();
	const diffMs = now - start;

	// 如果开始时间在未来，返回0
	if (diffMs < 0) {
		return 0;
	}
	// 计算天数，不足一天按一天算
	const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
	return Math.max(1, diffDays);
};
const applyRefund = () => {
	vipRefund({ id: firstID.value }).then((res) => {
		if (res.code == 200) {
			toast('已申请退款');
			refundCan.value = false;
		}
	});
};
const refundCan = ref(0);
const firstID = ref(0);
const dataConfig = reactive({});
onLoad(() => {
	uni.$on('isAll',function(e){
		isRead.value = e
	})
	getUserInfo();
	getConfig({}).then((res) => {
		if (res.code == 200) {
			Object.assign(dataConfig, res.data);
			console.log(dataConfig);
		}
	});
});
</script>

<style lang="scss">
page {
	background: #fbfcf9;
}

.popup {
	width: 484rpx;

	.imgbcg_v {
		width: 484rpx;
		height: 624rpx;
		position: relative;
	}

	.imgbcg_ads {
		width: 484rpx;
		height: 624rpx;
		position: absolute;
		top: 0;
		padding: 196rpx 62rpx 0rpx 82rpx;
		box-sizing: border-box;

		.tss {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			line-height: 60rpx;

			text {
				font-family: 'DIN-BOLD';
				font-size: 32rpx;
			}
		}
	}

	.imgbcg {
		width: 484rpx;
		height: 624rpx;
	}

	.popup_btns {
		width: 220rpx;
		height: 60rpx;
		background: #d8c6a7;
		border-radius: 40rpx;
		margin: 30rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 60rpx;
	}
}

.hy_btns_zw {
	height: 180rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.hy_btns {
	width: 750rpx;
	min-height: 180rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 998;
	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		min-height: 180rpx;
		color: #000000;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		align-items: center;

		.select {
			margin-bottom: 18rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			// #75613e
		}

		.onebtns {
			width: 710rpx;
			height: 80rpx;
			background: #e3d0ad;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #75613e;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}

		.active {
			background: #d8c6a7;
			color: #75613e;
		}
	}
}

.top {
	.bcg {
		position: fixed;
		width: 100%;
		height: 600rpx;
		top: 0%;
	}

	.ads {
		position: relative;
		height: 424rpx;

		.user {
			margin: 28rpx 40rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 24rpx;
			}

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1b1b1b;
		}

		.img {
			width: 710rpx;
			margin: 0 auto;
			position: relative;

			.img1 {
				width: 710rpx;
				height: 260rpx;
			}

			.img1ads {
				position: absolute;
				width: 710rpx;
				height: 260rpx;
				top: 0%;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;

				.tit {
					font-size: 28rpx;
					color: #75613e;
				}

				.cont_text {
					margin-top: 54rpx;

					.t1 {
						font-weight: bold;
						font-size: 40rpx;
						color: #75613e;
					}

					.t2 {
						margin-top: 26rpx;
						font-size: 20rpx;
						color: #75613e;
					}
				}
			}

			.img2 {
				width: 710rpx;
				height: 80rpx;
			}

			.img2ads {
				position: absolute;
				width: 710rpx;
				height: 80rpx;
				top: 0%;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #75613e;
				line-height: 80rpx;
			}
		}

		.dy {
			width: 710rpx;
			margin: 30rpx auto;

			.tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}

			.dy_block {
				width: 710rpx;
				height: 240rpx;
				background: rgba(243, 243, 237, 0.5);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1px solid #d8c6a7;
				margin-top: 20rpx;
				padding: 30rpx 40rpx;
				box-sizing: border-box;

				.dy_img {
					display: flex;

					image {
						width: 134rpx;
						height: 100rpx;
					}

					.dy_text {
						margin-left: 16rpx;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1b1b1b;
							line-height: 36rpx;

							text {
								font-family: 'DIN-BOLD';
								font-size: 48rpx;
							}
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #75613e;
						}
					}
				}

				.btn {
					width: 630rpx;
					height: 72rpx;
					background: #e3d0ad;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #75613e;
					text-align: center;
					line-height: 72rpx;
					margin: 20rpx auto;
				}
			}
		}
	}
}

.hy_ts {
	width: 710rpx;
	margin: 0 auto;

	.titimg {
		display: block;
		width: 232rpx;
		height: 50rpx;
		margin: 20rpx auto;
		text-align: center;
	}

	.titimg1 {
		display: block;
		width: 356rpx;
		height: 52rpx;
		margin: 20rpx auto;
		text-align: center;
	}

	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
	}

	.texts {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 32rpx 30rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #75613e;
			margin-bottom: 15rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			line-height: 40rpx;
		}

		.ddd {
			width: 650rpx;
			border-bottom: 1px dashed #75613e;
			margin: 20rpx auto;
			opacity: 0.3;
		}
	}
}

.runbtn {
	width: 260rpx;
	height: 60rpx;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 1px solid #b19561;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #b19561;
	text-align: center;
	line-height: 60rpx;
	margin: 40rpx auto;
}
</style>
